<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <th:block th:include="include :: header('用户管理')"/>
    <th:block th:include="include :: dtree_css"/>
</head>
<body class="x-admin-sm">
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">

            <div class="layui-form-item">
                <label for="roleName" class="layui-form-label">
                    <span class="x-red">*</span>角色名称
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="roleName" name="roleName" required=""
                           lay-verify="required|roleName"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>
                </div>
            </div>

            <div class="layui-form-item">
                <label for="roleKey" class="layui-form-label">
                    <span class="x-red">*</span>角色字符
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="roleKey" name="roleKey" required=""
                           lay-verify="required|roleKey"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>
                </div>
            </div>

            <div class="layui-form-item">
                <label for="roleSort" class="layui-form-label">
                    <span class="x-red">*</span>显示顺序
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="roleSort" name="roleSort" required=""
                           lay-verify="required|number"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>
                </div>
            </div>


            <div class="layui-form-item">
                <label for="status" class="layui-form-label">
                    <span class="x-red">*</span>状态
                </label>
                <div class="layui-input-inline">
                    <input type="checkbox" id="status" name="status" lay-skin="switch"
                           checked="true" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>
                </div>
            </div>


            <div class="layui-form-item">
                <label for="remark" class="layui-form-label">
                    <span class="x-red">*</span>备注
                </label>
                <div class="layui-input-block">
                    <textarea id="remark" name="remark" required="" lay-verify="required"
                              autocomplete="off" class="layui-textarea"></textarea>
                </div>
            </div>

            <div>
                <label for="menuDTree" class="layui-form-label">
                    <span class="x-red">*</span>菜单权限
                </label>
                <div class="layui-input-block">
                    <ul id="menuDTree" class="dtreeWidth" data-id="0"></ul>
                </div>
            </div>

            <div class="layui-form-item">
                <label for="btn_modify" class="layui-form-label">
                </label>
                <button id="btn_modify" class="layui-btn " lay-filter="modify" lay-submit="">
                    修改
                </button>
            </div>

        </form>
    </div>
</div>

<th:block th:include="include :: dtree_js"/>
<script th:inline="javascript"> var ctx = [[@{/}]] </script>
<script>

    layui.use(['form', 'layer', 'dtree'],
        function () {
            $ = layui.jquery;
            var form = layui.form;
            var layer = layui.layer;
            var dtree = layui.dtree;

            //自定义验证规则
            form.verify({
                roleName: function (value) {
                    if (value.length < 3) {
                        return '角色名称至少得3个字符';
                    }
                    let tips;
                    $.ajax({
                        url: ctx + 'system/role/roleNameModify',
                        type: 'POST',
                        data: {roleName: $('#roleName').val()},
                        async: false,
                        success: function (res) {
                            tips = res;
                        }
                    });

                    if (tips.code != 0) {
                        return tips.msg;
                    }

                },
                roleKey: function (value) {
                    let tips;
                    $.ajax({
                        url: ctx + 'system/role/roleKeyModify',
                        type: 'POST',
                        data: {roleKey: $('#roleKey').val()},
                        async: false,
                        success: function (res) {
                            tips = res;
                        }
                    });

                    if (tips.code != 0) {
                        return tips.msg;
                    }
                }

            });


            dtree.render({
                elem: '#menuDTree',
                url: ctx + 'system/menu/dTree',
                method: 'POST',
                dataStyle: "layuiStyle",  //使用layui风格的数据格式
                dataFormat: "list",  //配置data的风格为list
                icon: ["0", "5"],
                checkbar: true,
                initLevel: 5,
                weight: '400',
                checkbarType: "all", // 默认就是all，其他的值为： no-all  p-casc   self  only
                response: {
                    statusName: "code", //返回标识（必填）
                    statusCode: 0, //返回码（必填）
                    message: "msg", //返回信息（必填）
                    rootName: "data", //根节点名称（必填）
                    treeId: "id", //节点ID（必填）
                    parentId: "parentId", //父节点ID（必填）
                    title: "title", //节点名称（必填）
                },
                request: {
                    roleId: 0
                },
                success: function (data, ul, first) {

                    // console.log(data);
                }


            });


            //监听提交
            form.on('submit(modify)',
                function (_data) {
                    // console.log(_data);
                    // 获取菜单信息
                    var menuParams = dtree.getCheckbarNodesParam("menuDTree");
                    var menuIdArr = menuParams.map((item, index) => {
                        return item.nodeId
                    }).join();

                    //数据信息获取
                    var _status = $("#status").is(':checked') == true ? 0 : 1;
                    _data.field.status = _status;
                    _data.field.menuIds = menuIdArr;

                    $.ajax({
                        method: 'POST',
                        url: ctx + 'system/role/insert',
                        data: _data.field,
                        success: function (res) {

                            if (res.code == 0) {
                                //关闭当前frame
                                xadmin.close();
                                // 可以对父窗口进行刷新
                                xadmin.father_reload();
                            }
                            // layer.msg("返回操作结果"+res.msg);
                        }
                    });

                    return false;
                });


        });
</script>
</body>

</html>
